<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>高速天气</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<style type="text/css">
			#weather_freeway_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				overflow-y: hidden;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
				z-index: 99;
			}
			
			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
			}
			
			html,
			body {
				height: 100%;
			}
			/*----应用页头部----*/
			
			.app_head_left {
				float: left;
				width: 22%;
				padding-left: 12px;
				padding-top: 3px;
				margin-top: 5px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.35em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 60%;
				margin-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.57em;
				font-family: "宋体";
			}
			
			.freewayInput {
				border: 1px solid #DEDEDE;
				font-size: 1.17em;
				width: 96%;
				margin: 0 auto;
				border-radius: 6px;
				height: 39px;
				padding-left: 1em;
				line-height: 38px;
			}
			
			.freewayInput span {
				font-size: 1.01em;
			}
			
			.freewayInput img {
				width: 25px;
				margin-top: 6px;
				margin-right: 10px;
				float: right;
				/*border: 1px solid;*/
			}
			/* 查询结果区域 */
			
			#weather_freeway_allResult {
				background-image: url(img/bg/bgimg_freeway200.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			.weather_freeway_result div {
				height: 50%;
				padding: 5px 15px;
			}
			/*导航栏样式*/
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
				height: 49px;
			}
			
			.weui_navbar_item b {
				display: block;
				font-size: 1.07em;
			}
			/* 输入框加底部边框 */
			
			.weather_freeway_select {
				height: 47px;
				border-bottom: 1px solid #DEDEDE;
				margin-top: 78px;
			}
			/* 弹出框关闭按钮样式 */
			
			.close-select {
				color: #0070B4 !important;
			}
			/* 区分白天晚上的小图标样式  */
			
			.iconDay {
				width: 2.2em;
				float: right;
				margin-right: 10px;
				margin-top: -8px;
			}
			
			.iconNight {
				width: 2.1em;
				float: right;
				margin-right: 10px;
				margin-top: -6px;
			}
			
			.iconDay,
			.iconNight {
				background-color: #FFFFFF;
				border-radius: 100px;
			}
			
			.weather_freeway_result p {
				/*color: #FFFFFF;*/
				color: #000000;
				font-weight: bold;
				font-size: 0.98em;
				/*border: 1px solid;*/
				margin-bottom: 0.9em;
			}
			
			.weather_freeway_result span {
				color: red;
			}
			
			.weather_freeway_result>div {
				width: 90%;
				margin-left: 5%;
				margin-right: 5%;
			}
			
			#dayFreewayW1,
			#dayFreewayW2 {
				height: 52.5%;
				padding-top: 25px;
			}
			
			.loadingIcon {
				width: 8%;
				margin: 14% 45%;
			}
			
			@media only screen and (min-width: 320px) and (max-width: 359px) {}
			
			.weather_freeway_select {
				height: 47px;
				border-bottom: 1px solid #DEDEDE;
				margin-top: 79px;
			}
			
			#todayW,
			#tomorrowW {
				overflow: hidden;
			}
			
			.gstqMain {
				line-height: 40px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="weather_freeway_main">
			<div class="index_head" id="freewayWeatherTitle">
				<div class="app_head_left">
					<a href="javascript:history.back(-1)" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">高速沿线天气</p>
				</div>
			</div>
			<div class="weather_freeway_select" id="freewayWeatherInput">
				<div class="freewayInput" id="bigFreewayInput">
					<span id="freewayInput">长春绕城高速(G0102)</span>
					<img src="img/weather/w_freeway/daosanjiao.png" id="freewaySelect" />
				</div>
			</div>

			<div class="weui_tab">
				<!--选择步行公交自驾按钮区域-->
				<!--<div class="weui_navbar" id="secTitle">
					<a href="#todayW" class="weui_navbar_item weui_bar_item_on" id="chooseSS"><b>未来24小时</b></a>
					<a href="#tomorrowW" class="weui_navbar_item" id="chooseMap"><b>未来72小时</b></a>
				</div>-->
				<div class="weui_tab_bd" id="weather_freeway_allResult">
					<!--<div id="todayW" class="weui_tab_bd_item weui_tab_bd_item_active">-->
					<div id="weather_freeway_result1" class="weather_freeway_result">
						<div id="dayFreewayW1">
							<p id="title1">

							</p>
							<img src="img/taxi/loading_icon_1.gif" class="loadingIcon" />
						</div>
					</div>

				</div>
			</div>

		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var h = document.documentElement.clientHeight;
			$(function() {
				$("#weather_freeway_result1").height(h - 181);
				//页面加载默认请求长春绕城高度天气
				$.ajax({
					type: "post",
					url: "http://111.26.219.36:9696/weather/wt",
					data: {
						"type": "road_weather_info",
						"ROADID": 1
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						getAllFreeWayAjax();
						$(".loadingIcon").hide();
						$(".gstqMain").remove();
						//						console.log(data);
						if(data.CODE == 1) {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								var data1 = d[0];
								var p1_1 = $('<p class="gstqMain">' + data1.weather + '<br />' + data1.wind + '<br /> ' + data1.humidity + '</p>');
								var p1_2 = $('<p class="gstqMain">' + data1.temperature.split(":")[0] + ':' + data1.temperature.split(":")[1] + '<br />' + data1.visibility + '</p>');
								var p1_3 = $('<p class="gstqMain">' + data1.safelevel.split(":")[0] + ':' + data1.safelevel.split(":")[1] + '<br />' + data1.wsafelevel + '</p>');
								var p1_4 = $('<p class="gstqMain">道路状态:' + data1.affect + '</p>');
								$("#title1").after(p1_1, p1_2, p1_3, p1_4);

							} else {
								errMD();
							}
						} else {
							$.alert("暂无数据", "提示");
						}

					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			});
			//获取所有高速名称方法
			var freeWayItems; //设置一个全局变量，将选择的线路所有站点以数组形式赋值
			function getAllFreeWayAjax() {
				$.ajax({
					type: "post",
					url: "http://111.26.219.36:9696/weather/wt",
					data: {
						"type": "road_info"
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data);
						if(data.CODE == 1) {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								//站点数据处理
								var allStr = "";
								for(var i = 0; i < d.length; i++) {
									var freeWayStr = '"title"' + ':' + '"' + d[i].roadName + '"' + ',' + '"value"' + ':' + d[i].roadId;
									//								allStr+= ","+eval(data.DATA)[i].STOP_NAME;
									allStr += ",{" + freeWayStr + "}";
								}
								allStr = allStr.substr(1);
								freeWayItems = JSON.parse('[' + allStr + ']');
								//console.log(freeWayItems);
								//点击起点站名框
								$("#bigFreewayInput").select("update", {
									title: "请选择高速",
									items: freeWayItems,
									onChange: function(d) {
										//console.log(d.titles);
										$("#freewayInput").html(d.titles);
										getThisFreeWayAjax(d);
										//								$(".loadingIcon").show();
									}
								});
							} else {
								errMD();
							}
						} else {
							$.alert("连接超时，请检查网络设置", "提示");
						}

					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			};
			$("#bigFreewayInput").select({
				title: "请选择高速",
				items: freeWayItems,
				onChange: function(d) {
					$("#freewayInput").html(d.titles);
//					getThisFreeWayAjax(d);
				},
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗关闭时 隐藏遮罩层
					$("#opacityDiv").hide();
				}
			});
			//获取单个高速天气详情方法
			function getThisFreeWayAjax(d) {
				$.ajax({
					type: "post",
					url: "http://111.26.219.36:9696/weather/wt",
					data: {
						"type": "road_weather_info",
						"ROADID": d.values
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$(".loadingIcon").hide();
						$(".gstqMain").remove();
						console.log(data);
						if(data.CODE == 1) {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								var data1 = d[0];
								var p1_1 = $('<p class="gstqMain">' + data1.weather + '<br />' + data1.wind + '<br /> ' + data1.humidity + '</p>');
								var p1_2 = $('<p class="gstqMain">' + data1.temperature.split(":")[0] + ':' + data1.temperature.split(":")[1] + '<br />' + data1.visibility + '</p>');
								var p1_3 = $('<p class="gstqMain">' + data1.safelevel.split(":")[0] + ':' + data1.safelevel.split(":")[1] + '<br />' + data1.wsafelevel + '</p>');
								var p1_4 = $('<p class="gstqMain">道路状态:' + data1.affect + '</p>');
								$("#title1").after(p1_1, p1_2, p1_3, p1_4);

							} else {
								errMD();
							}
						} else {
							$.alert("暂无数据", "提示");
						}
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			};
			//获取今明两天日期
			function getDateStr(AddDayCount) {
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取X天后的日期
				var m = dd.getMonth() + 1; //获取当前月份的日期
				var d = dd.getDate();
				return m + "月" + d + "日";
			}
		</script>
	</body>

</html>